<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../layui/css/layui.css">

    <link rel="stylesheet" href="static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="static/css/entypo.css">
    <link rel="stylesheet" href="static/css/css.css">
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/neon-core.css">
    <link rel="stylesheet" href="static/css/neon-theme.css">
    <link rel="stylesheet" href="static/css/neon-forms.css">
    <link rel="stylesheet" href="static/css/custom.css">


    <script src="static/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .panel-title input{
            display: block;
            width: 100%;
            height: 31px;
            padding: 6px 12px;
            font-size: 12px;
            line-height: 1.42857143;
            color: #555555;
            background-color: #ffffff;
            background-image: none;
            border: 1px solid #ebebeb;
            border-radius: 3px;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -moz-transition: border-color ease-in-out .15s, -moz-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            display: inline-block;
            width: 150px;
            margin-left: 5px;
        }
    </style>


</head>
<body>


<ol class="breadcrumb bc-3">
    <li>
        <a href="index.html"><i class="entypo-home"></i>首页</a>
    </li>
    <li>
        <a href="javascript:;">帖子管理</a>
    </li>
    <li class="active">

        <strong>评论列表</strong>
    </li>
</ol>

<!--<h3>-->
    <!--&lt;!&ndash;<span class="label label-warning">New in 1.1.3</span>&ndash;&gt;-->
    <!--帖子列表-->
    <!--&lt;!&ndash;<small>Try to resize the window to mobile width</small>&ndash;&gt;-->
<!--</h3>-->
<!--<br>-->

<div class="panel panel-primary" id="app">
    <div class="panel-heading">
        <div class="panel-title">

            <input type="text" v-model="key" placeholder="评论人">
            <button type="button" class="btn btn-primary btn-xs" @click="getreplylist()"><i class="layui-icon layui-icon-search"></i> </button>

        </div>

        <div class="panel-options">
            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i
                    class="entypo-cog"></i></a>
            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
            <a href="#"><i class="fa fa-dot-circle-o"></i></a>

        </div>
    </div>

    <table class="table table-bordered table-responsive">
        <thead>
        <tr>
            <th>#</th>
            <th>回贴人</th>
            <th>内容</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="(reply,i) in replylist">
            <td>{{i+1}}</td>
            <td>{{reply.member.tname}}</td>
            <td>{{reply.content}}</td>
            <td>{{reply.savetime}}</td>
            <td>
                <a href="javascript:;" @click="del(reply.id)"><i class="layui-icon layui-icon-delete"></i></a>


            </td>
        </tr>

        <tr>
            <td colspan="3">
                <div id="demo1" style="text-align: center"></div>
            </td>
        </tr>

        </tbody>
    </table>
</div>

<link rel="stylesheet" href="static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="static/css/rickshaw.min.css">

<!-- Bottom Scripts -->
<script src="static/js/main-gsap.js"></script>
<script src="static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="static/js/bootstrap.js"></script>
<script src="static/js/joinable.js"></script>
<script src="static/js/resizeable.js"></script>
<script src="static/js/neon-api.js"></script>
<script src="static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="static/js/jquery.sparkline.min.js"></script>
<script src="static/js/d3.v3.js"></script>
<script src="static/js/rickshaw.min.js"></script>
<script src="static/js/raphael-min.js"></script>
<script src="static/js/morris.min.js"></script>
<script src="static/js/toastr.js"></script>
<script src="static/js/neon-chat.js"></script>
<script src="static/js/neon-custom.js"></script>
<script src="static/js/neon-demo.js"></script>



<script type="text/javascript" src="../axios/vue.js"></script>
<script type="text/javascript" src="../axios/axios.min.js"></script>
<script type="text/javascript" src="../axios/qs.js"></script>
<script type="text/javascript" src="../axios/getUrlParams.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script>
    var qs = Qs
    var articleid = UrlParam.paramValues("articleid").toString()
    var vmm = new Vue({
        el: '#app',
        data: {
            articleid:articleid,
            replylist: [],
            key: '',
            pageSize:10,

        },
        mounted(){
            this.getreplylist()
        },
        methods: {
            getreplylist() {
                axios.post('replyList',qs.stringify({
                    articleid:this.articleid,
                    key:this.key,
                    pageSize:this.pageSize
                })).then(response =>{
                    layui.use(['laypage', 'layer'], function(){
                    var laypage = layui.laypage
                        ,layer = layui.layer;
                    //总页数大于页码总数
                    laypage.render({
                        elem: 'demo1'
                        ,limit:vmm.pageSize
                        ,count: response.data.list.length //数据总数
                        ,jump: function(obj,first){
                            vmm.current_page(obj.curr,vmm.pageSize)
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        }
                    });
                });
            }).catch(error =>{
                    console.log(error)
            })
            },
            current_page(page,pageSize){
                axios.post('replyList',qs.stringify({
                    articleid:this.articleid,
                    key:this.key,
                    pageNum:page,
                    pageSize:pageSize,
                })).then(response =>{
                    this.replylist = response.data.pageInfo.list
            }).catch(error =>{
                    console.log(error)
            })
            },

            del(id){
                axios.post("replyDel",qs.stringify({
                    id:id,
                })).then(response =>{
                    this.getreplylist()
            }).catch(error =>{
                    console.log(error)
            })
            },


        }
    });
</script>


</body>
</html>